<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data: ['销量']
        //     },
        //     xAxis: {
        //         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //     },
        //     yAxis: {},
        //     series: [
        //         {
        //             name: '销量',
        //             type: 'bar',
        //             data: [5, 20, 36, 10, 10, 20]
        //         }
        //     ]
        // };
        option = {
            xAxis: {
                type: 'category',
                data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
            },
            legend: {
              data: ['2015', '2016', '2017']
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    name: '2015',
                    data: [89.3, 92.1, 94.4, 85.4]
                },
                {
                    type: 'bar',
                    name: '2016',
                    data: [95.8, 89.4, 91.2, 76.9]
                },
                {
                    type: 'bar',
                    name: '2017',
                    data: [97.7, 83.1, 92.5, 78.1]
                }
            ]
        };

        // 目前并非所有图表都支持 dataset。支持 dataset 的图表有： line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。
        // option = {
        //     legend: {},
        //     tooltip: {},
        //     dataset: {
        //         // 提供一份数据。
        //         source: [
        //             ['product', '2015', '2016', '2017'],
        //             ['Matcha Latte', 43.3, 85.8, 93.7],
        //             ['Milk Tea', 83.1, 73.4, 55.1],
        //             ['Cheese Cocoa', 86.4, 65.2, 82.5],
        //             ['Walnut Brownie', 72.4, 53.9, 39.1]
        //         ]
        //     },
        //     // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        //     xAxis: { type: 'category', name: '分类'},
        //     // 声明一个 Y 轴，数值轴。
        //     yAxis: {name: '数量'},
        //     // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        //     series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        // };

        // var option = {
        //     dataset: [
        //         {
        //             // 这个 dataset 的 index 是 `0`。
        //             source: [
        //                 ['Product', 'Sales', 'Price', 'Year'],
        //                 ['Cake', 123, 32, 2011],
        //                 ['Cereal', 231, 14, 2011],
        //                 ['Tofu', 235, 5, 2011],
        //                 ['Dumpling', 341, 25, 2011],
        //                 ['Biscuit', 122, 29, 2011],
        //                 ['Cake', 143, 30, 2012],
        //                 ['Cereal', 201, 19, 2012],
        //                 ['Tofu', 255, 7, 2012],
        //                 ['Dumpling', 241, 27, 2012],
        //                 ['Biscuit', 102, 34, 2012],
        //                 ['Cake', 153, 28, 2013],
        //                 ['Cereal', 181, 21, 2013],
        //                 ['Tofu', 395, 4, 2013],
        //                 ['Dumpling', 281, 31, 2013],
        //                 ['Biscuit', 92, 39, 2013],
        //                 ['Cake', 223, 29, 2014],
        //                 ['Cereal', 211, 17, 2014],
        //                 ['Tofu', 345, 3, 2014],
        //                 ['Dumpling', 211, 35, 2014],
        //                 ['Biscuit', 72, 24, 2014]
        //             ]
        //             // id: 'a'
        //         },
        //         {
        //             // 这个 dataset 的 index 是 `1`。
        //             // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
        //             transform: {
        //                 type: 'filter',
        //                 config: { dimension: 'Year', value: 2011 }
        //             }
        //             // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
        //             // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
        //             // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
        //             // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
        //             // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
        //         },
        //         {
        //             // 这个 dataset 的 index 是 `2`。
        //             // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
        //             // 那么输入默认来自于 index 为 `0` 的 dataset 。
        //             transform: {
        //                 // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
        //                 type: 'filter',
        //                 // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
        //                 // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
        //                 // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
        //                 // 数据项。
        //                 config: { dimension: 'Year', value: 2012 }
        //             }
        //         },
        //         {
        //             // 这个 dataset 的 index 是 `3`。
        //             transform: {
        //                 type: 'filter',
        //                 config: { dimension: 'Year', value: 2013 }
        //             }
        //         }
        //     ],
        //     series: [
        //         {
        //             type: 'pie',
        //             radius: 50,
        //             center: ['25%', '50%'],
        //             // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
        //             // 2011 年那个 "filter" transform 的结果。
        //             datasetIndex: 1
        //         },
        //         {
        //             type: 'pie',
        //             radius: 50,
        //             center: ['50%', '50%'],
        //             datasetIndex: 2
        //         },
        //         {
        //             type: 'pie',
        //             radius: 50,
        //             center: ['75%', '50%'],
        //             datasetIndex: 3
        //         }
        //     ]
        // };


        // option = {
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: { type: 'cross' }
        //     },
        //     legend: {},
        //     xAxis: [
        //         {
        //             type: 'category',
        //             axisTick: {
        //                 alignWithLabel: true
        //             },
        //             data: [
        //                 '1月',
        //
        //                 '2月',
        //                 '3月',
        //                 '4月',
        //                 '5月',
        //                 '6月',
        //                 '7月',
        //                 '8月',
        //                 '9月',
        //                 '10月',
        //                 '11月',
        //                 '12月'
        //             ]
        //         }
        //     ],
        //     yAxis: [
        //         {
        //             type: 'value',
        //             name: '降水量',
        //             min: 0,
        //             max: 250,
        //             position: 'right',
        //             axisLabel: {
        //                 formatter: '{value} ml'
        //             }
        //         },
        //         {
        //             type: 'value',
        //             name: '温度',
        //             min: 0,
        //             max: 25,
        //             position: 'left',
        //             axisLabel: {
        //                 formatter: '{value} °C'
        //             }
        //         }
        //     ],
        //     series: [
        //         {
        //             name: '降水量',
        //             type: 'bar',
        //             yAxisIndex: 0,
        //             data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
        //         },
        //         {
        //             name: '温度',
        //             type: 'line',
        //             smooth: true,
        //             yAxisIndex: 1,
        //             data: [
        //                 6.0,
        //                 10.2,
        //                 10.3,
        //                 11.5,
        //                 10.3,
        //                 13.2,
        //                 14.3,
        //                 16.4,
        //                 18.0,
        //                 16.5,
        //                 12.0,
        //                 5.2
        //             ]
        //         }
        //     ]
        // };


        // option = {
        //     visualMap: [
        //         {
        //             type: 'continuous',
        //             min: 0,
        //             max: 5000,
        //             dimension: 3, // series.data 的第四个维度（即 value[3]）被映射
        //             seriesIndex: 4, // 对第四个系列进行映射。
        //             inRange: {
        //                 // 选中范围中的视觉配置
        //                 color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
        //                 // 数据最小值映射到'blue'上，
        //                 // 最大值映射到'red'上，
        //                 // 其余自动线性计算。
        //                 symbolSize: [30, 100] // 定义了图形尺寸的映射范围，
        //                 // 数据最小值映射到30上，
        //                 // 最大值映射到100上，
        //                 // 其余自动线性计算。
        //             },
        //             outOfRange: {
        //                 // 选中范围外的视觉配置
        //                 symbolSize: [30, 100]
        //             }
        //         }
        //         //    ...
        //     ]
        // };

        // function makeRandomData() {
        //     return [
        //         {
        //             value: Math.random(),
        //             name: 'A'
        //         },
        //         {
        //             value: Math.random(),
        //             name: 'B'
        //         },
        //         {
        //             value: Math.random(),
        //             name: 'C'
        //         }
        //     ];
        // }
        // option = {
        //     series: [
        //         {
        //             type: 'pie',
        //             radius: [0, '50%'],
        //             data: makeRandomData()
        //         }
        //     ]
        // };
        //
        // setInterval(() => {
        //     myChart.setOption({
        //         series: {
        //             data: makeRandomData()
        //         }
        //     });
        // }, 2000);

        // var symbolSize = 20;
        // var data = [
        //     [15, 0],
        //     [-50, 10],
        //     [-56.5, 20],
        //     [-46.5, 30],
        //     [-22.1, 40]
        // ];
        // myChart.setOption({
        //     tooltip: {
        //         triggerOn: 'none',
        //         formatter: function(params) {
        //             return (
        //                 'X: ' +
        //                 params.data[0].toFixed(2) +
        //                 '<br />Y: ' +
        //                 params.data[1].toFixed(2)
        //             );
        //         }
        //     },
        //     xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },
        //     yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },
        //     series: [
        //         { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }
        //     ]
        // });
        // myChart.setOption({
        //     graphic: echarts.util.map(data, function(item, dataIndex) {
        //         return {
        //             type: 'circle',
        //             position: myChart.convertToPixel('grid', item),
        //             shape: { r: symbolSize / 2 },
        //             invisible: true,
        //             draggable: true,
        //             ondrag: echarts.util.curry(onPointDragging, dataIndex),
        //             onmousemove: echarts.util.curry(showTooltip, dataIndex),
        //             onmouseout: echarts.util.curry(hideTooltip, dataIndex),
        //             z: 100
        //         };
        //     })
        // });
        // window.addEventListener('resize', function() {
        //     myChart.setOption({
        //         graphic: echarts.util.map(data, function(item, dataIndex) {
        //             return { position: myChart.convertToPixel('grid', item) };
        //         })
        //     });
        // });
        // function showTooltip(dataIndex) {
        //     myChart.dispatchAction({
        //         type: 'showTip',
        //         seriesIndex: 0,
        //         dataIndex: dataIndex
        //     });
        // }
        // function hideTooltip(dataIndex) {
        //     myChart.dispatchAction({ type: 'hideTip' });
        // }
        // function onPointDragging(dataIndex, dx, dy) {
        //     data[dataIndex] = myChart.convertFromPixel('grid', this.position);
        //     myChart.setOption({
        //         series: [
        //             {
        //                 id: 'a',
        //                 data: data
        //             }
        //         ]
        //     });
        // }

        // option = {
        //     dataZoom: [
        //         {
        //             id: 'dataZoomX',
        //             type: 'slider',
        //             xAxisIndex: [0],
        //             filterMode: 'filter'
        //         },
        //         {
        //             id: 'dataZoomY',
        //             type: 'slider',
        //             yAxisIndex: [0],
        //             filterMode: 'empty'
        //         }
        //     ],
        //     xAxis: {type: 'value'},
        //     yAxis: {type: 'value'},
        //     series: {
        //         type: 'bar',
        //         data: [
        //             // 第一列对应 X 轴，第二列对应 Y 轴。
        //             [12, 24, 36],
        //             [90, 80, 70],
        //             [3, 9, 27],
        //             [1, 11, 111]
        //         ]
        //     }
        // }

        option = {
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'inside',
                    xAxisIndex: [0],
                    filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
                    start: 30,
                    end: 70
                },
                {
                    id: 'dataZoomY',
                    type: 'slider',
                    yAxisIndex: [0],
                    filterMode: 'empty',
                    start: 20,
                    end: 80
                }
            ],
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
                // yAxis 中并没有使用 min、max 来显示限定轴的显示范围。
            },
            series: {
                type: 'bar',
                data: [
                    // 第一列对应 X 轴，第二列对应 Y 轴。
                    [12, 24, 36],
                    [90, 80, 70],
                    [3, 9, 27],
                    [1, 11, 111]
                ]
            }
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>